// Primary colors - inspired by traditional Chinese colors
$primary-color: #c8102e;        // Chinese red
$primary-dark: #9d0825;
$primary-light: #e8576b;

$secondary-color: #f4a261;      // Golden yellow
$accent-color: #264653;         // Dark green
$success-color: #2a9d8f;        // Teal
$warning-color: #e9c46a;        // Warm yellow
$error-color: #e76f51;          // Coral red
$info-color: #457b9d;           // Blue

// Neutral colors
$white: #ffffff;
$gray-50: #f8f9fa;
$gray-100: #f1f3f4;
$gray-200: #e8eaed;
$gray-300: #dadce0;
$gray-400: #bdc1c6;
$gray-500: #9aa0a6;
$gray-600: #5f6368;
$gray-700: #3c4043;
$gray-800: #202124;
$gray-900: #1a1a1a;

// Text colors
$text-primary: $gray-800;
$text-secondary: $gray-600;
$text-muted: $gray-500;
$text-inverse: $white;

// Background colors
$bg-primary: $white;
$bg-secondary: $gray-50;
$bg-muted: $gray-100;
$bg-dark: $gray-800;

// Border colors
$border-light: $gray-200;
$border-medium: $gray-300;
$border-dark: $gray-400;

// Spacing scale
$spacing-xs: 0.25rem;   // 4px
$spacing-sm: 0.5rem;    // 8px
$spacing-md: 1rem;      // 16px
$spacing-lg: 1.5rem;    // 24px
$spacing-xl: 2rem;      // 32px
$spacing-xxl: 3rem;     // 48px
$spacing-xxxl: 4rem;    // 64px

// Font families
$font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
  'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial,
  sans-serif;

$font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
  Consolas, 'Courier New', monospace;

$font-family-serif: 'Times New Roman', Times, serif;

// Font sizes
$font-size-xs: 0.75rem;    // 12px
$font-size-sm: 0.875rem;   // 14px
$font-size-base: 1rem;     // 16px
$font-size-lg: 1.125rem;   // 18px
$font-size-xl: 1.25rem;    // 20px
$font-size-2xl: 1.5rem;    // 24px
$font-size-3xl: 1.875rem;  // 30px
$font-size-4xl: 2.25rem;   // 36px
$font-size-5xl: 3rem;      // 48px

// Font weights
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;

// Line heights
$line-height-tight: 1.25;
$line-height-normal: 1.5;
$line-height-relaxed: 1.625;
$line-height-loose: 2;

// Border radius
$border-radius-sm: 0.25rem;  // 4px
$border-radius: 0.5rem;      // 8px
$border-radius-md: 0.75rem;  // 12px
$border-radius-lg: 1rem;     // 16px
$border-radius-xl: 1.5rem;   // 24px
$border-radius-full: 9999px;

// Shadows
$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
$shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

// Z-index scale
$z-index-dropdown: 1000;
$z-index-sticky: 1020;
$z-index-fixed: 1030;
$z-index-modal-backdrop: 1040;
$z-index-modal: 1050;
$z-index-popover: 1060;
$z-index-tooltip: 1070;

// Breakpoints
$breakpoint-xs: 0;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$breakpoint-xxl: 1400px;

// Animation durations
$duration-fast: 0.15s;
$duration-base: 0.3s;
$duration-slow: 0.5s;

// Animation easing
$ease-in: cubic-bezier(0.4, 0, 1, 1);
$ease-out: cubic-bezier(0, 0, 0.2, 1);
$ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);